<template>
  <field-wrapper>
    <div class="py-6 px-8 w-full">
      <div class="mb-6" v-if="fieldLabel">
        <form-label
          :for="field.attribute"
          :class="{
            'mb-2': field.helpText && showHelpText,
          }"
        >
          {{ fieldLabel }}

          <span v-if="field.required" class="text-danger text-sm">{{
            __("*")
          }}</span>
        </form-label>

        <help-text v-if="showHelpText">
          {{ field.helpText }}
        </help-text>
      </div>

      <slot name="field" />

      <help-text
        class="error-text mt-2 text-danger"
        v-if="showErrors && hasError"
      >
        {{ firstError }}
      </help-text>
    </div>
  </field-wrapper>
</template>

<script>
import { HandlesValidationErrors, mapProps } from "laravel-nova";

export default {
  mixins: [HandlesValidationErrors],

  props: {
    field: { type: Object, required: true },
    fieldName: { type: String },
    showErrors: { type: Boolean, default: true },
    ...mapProps(["showHelpText"]),
  },

  computed: {
    fieldLabel() {
      // If the field name is purposefully empty, hide the label altogether
      if (this.fieldName === "") {
        return false;
      }

      return this.fieldName || this.field.singularLabel || this.field.name;
    },
  },
};
</script>
